<script lang="ts" setup>
import { Question, QuestionState } from "@/types/practice";
// @ts-ignore
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

const props = defineProps<{
  visible: boolean;
  currentIndex: number;
  questionIds: Question["id"][];
  questionsStateMap: Map<Question["id"], QuestionState>;
}>();

const emit = defineEmits<{
  "update:visible": [value: boolean];
  "update:currentIndex": [value: number];
}>();

// 获取页面高度
const containerWidth = document.documentElement.clientWidth;

const convertedList = computed(() => props.questionIds.map((id, index) => ({ index, id })));

const updateCurrentIndex = (index: number) => {
  emit("update:currentIndex", index);
  emit("update:visible", false);
};

// 自动滚动到对应位置
const scroller = ref(null);
watch(
  () => props.visible,
  () => (scroller.value as any | null)?.scrollToItem(Math.max(0, props.currentIndex))
);
</script>

<template>
  <!-- 阴影遮罩 -->
  <div
    class="fixed inset-0 bg-black transition duration-300"
    :class="{
      'op-50 pointer-events-auto': visible,
      'op-0 pointer-events-none': !visible,
    }"
    @click="emit('update:visible', false)"
  ></div>

  <!-- 题号列表 -->
  <div class="fixed left-0 right-0 bottom-0 h-3/4 bg-white transition duration-300" :class="{ 'translate-y-full': !visible }">
    <recycle-scroller
      ref="scroller"
      class="h-full"
      :items="convertedList"
      :grid-items="5"
      :item-size="64"
      :item-secondary-size="containerWidth / 5"
      key-field="index"
      item-class="flex items-center justify-center"
      v-slot="{ item }"
    >
      <div
        class="w-12 h-12 my-2 flex justify-center items-center b-1 b-solid rd-full c-gray-4"
        :class="{
          'b-transparent': item.index !== currentIndex,
          'b-green-7': item.index === currentIndex,
          'bg-green-1 c-green-7': questionsStateMap.get(item.id)?.actionRecord?.lastErrorAnswerRecord === true,
          'bg-red-1 c-red-7': questionsStateMap.get(item.id)?.actionRecord?.lastErrorAnswerRecord === false,
        }"
        @click="updateCurrentIndex(item.index)"
      >
        {{ item.index + 1 }}
      </div>
    </recycle-scroller>
  </div>
</template>
